@import "@angular/material/theming";

@mixin app-classes($theme) {

  // Parse the theme and create variables for each color in the palette
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);

  // Create theme specific styles
  .primary-color {
    color: mat-color($primary);
  }
  .accent-color {
    color: mat-color($accent);
  }
  .warn-color {
    color: mat-color($warn);
  }

  .primary-bg {
    background-color: mat-color($primary);
    color: mat-color($primary, default-contrast);
  }
  .accent-bg {
    background-color: mat-color($accent);
    color: mat-color($accent, default-contrast);
  }
  .warn-bg {
    background-color: mat-color($warn);
    color: mat-color($warn, default-contrast);
  }

  .primary-border {
    border: 1px solid mat-color($primary);
    border-radius: 5px;
  }
  .accent-border {
    border: 1px solid mat-color($accent);
    border-radius: 5px;
  }
  .warn-border {
    border: 1px solid mat-color($warn);
    border-radius: 5px;
  }

  .note-padding {
    padding: 5px 15px;
  }

  .primary-note {
    @extend .primary-bg, .note-padding;
  }

  .accent-note {
    @extend .accent-bg, .note-padding;
  }

  .warn-note {
    @extend .warn-bg, .note-padding;
  }

  // Style of custom dual-split-button
  $border-color: mat-color($foreground, divider);

  .dual-split-button {
    border: 1px solid $border-color;
    border-radius: 4px;
  }

  .dual-split-button > button:first-of-type {
    border-right: 1px solid $border-color;
    border-radius: 0;
  }

}
